<template>
  <div class ="main-pm">
    <div class="main-top">
      <el-form ref="form" :model="form" label-width="52px" :inline="true">
          <el-form-item label="人员姓名" prop='name'>
            <el-input v-model="form.name" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="人员号码" prop='msisdn'>
            <el-input v-model="form.msisdn" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="人员分组" prop='group'>
                <el-select v-model="form.group" placeholder="请选择分组">
                    <el-option v-for='items in groupInfo' :key='items.groupId' :label="items.groupName" :value="items.groupId"></el-option>
                </el-select>
          </el-form-item>

          <el-form-item label="开户状态" class="main—class" prop='state'>
            <el-select v-model="form.state" placeholder="请选择" class="main-state">
              <el-option label="正常" value="1"></el-option>
              <el-option label="暂停" value="2"></el-option>
              <el-option label="失效" value="3"></el-option>
            </el-select>
          </el-form-item>

         <el-form-item style='margin-left: 30px;'>
            <el-button type="primary" @click="queryInfo()" size="small" icon="el-icon-search">查询</el-button>
            <el-button size="small" icon="el-icon-refresh-left"  @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="font-size: 13px;"
        :header-cell-style="tableHeader">
        <el-table-column
          fixed
          label="人员名称"
          width="110"
          :show-overflow-tooltip="true">
           <template slot-scope="scope">
                <el-input v-if="scope.row.personId==editId" v-model="scope.row.personName"></el-input>
                <span>{{scope.row.personName}}</span>
            </template>
        </el-table-column>
        <el-table-column
          prop="msisdn"
          label="人员号码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="分组"
          :show-overflow-tooltip="true"
          width="100">
          <template slot-scope="scope">
                <span v-if="scope.row.groupName == null">暂未分组</span>
                <span>{{scope.row.groupName}}</span>
            </template>
        </el-table-column>
        <el-table-column
          prop="efftTime"
          label="生效时间"
          width="230">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.state == '1'">正常</span>
            <span v-if="scope.row.state == '2'" style="color:#FF4848">暂停</span>
            <span v-if="scope.row.state == '3'" style="color:#FF4848">无效</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operTime"
          label="最新操作时间"
          width="170">
        </el-table-column>
        <el-table-column
          prop="operatorName"
          label="操作人"
          width="100">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.personId!=editId" @click="changeClick(scope.row)" size="small">编辑</el-button>
                <el-button type="text" v-if="scope.row.personId==editId" @click="cancelClick(scope.row)" size="small">取消</el-button>
                <el-button type="text" v-if="scope.row.personId==editId" @click="saveClick(scope.row)" size="small">保存</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main-bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    // export const onLine = {'1':'正常', '2':'暂停', '3':'无效'};
    import {dateFormat,chgStrToDate} from '@/base/utils.js'

    export default {
        name: "PersonManage",
        data() {

          return {
            props: {
              value: 'groupId',
              label: 'groupName',
              multiple: true,
            },
            checkAll: false,
            tableData: [],
            groupInfo: [],
            currentPage: 1,
            tableHeader: {
              backgroundColor: '#E1F1FF',
              color: '#4389D6'
            },
            form: {
              name: '',
              msisdn: '',
              group:'',
              state:''
            },
            page: 1,
            currentPage1: 1,
            limit: '',
            total: '',//表格内容条数
            editId:'',  //判断编辑的是哪一行
            editData:[],  //编辑行初始数据
          }
        },
      methods:{
        handleCheckAllChange(val) {
          this.checkedUsers = val ? this.users : [];
          this.isIndeterminate = false;
        },
        handlecheckedUsersChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.users.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.users.length;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val;
            this.qryData()
        },
        queryInfo(){
            this.currentPage1 = 1;
            this.qryData();
        },
        // 查询操作员所管理的组成员
        qryData(){
            let url= '/lbs/usercenter/memberMag/h5QryMemberInfo';
            let params = {
                personName: this.form.name,
                personMsisdn: this.form.msisdn,
                groupId: this.form.group,
                state: this.form.state,
                page: this.page,
                limit: this.limit
            }
            this.$http.post(url,params).then(res =>{
                let {retCode,retMsg,pageData,total} = res.data;
                if (retCode === '0'){
                    this.total = total;
                    pageData.forEach(items => {
                        items.efftTime = dateFormat(chgStrToDate(items.efftTime),'yyyy/MM/dd');
                        items.operTime = dateFormat(chgStrToDate(items.operTime),'yyyy/MM/dd hh:mm:ss');
                    });
                    this.tableData = pageData;
                    console.log(this.tableData);
                }else {
                    this.$message({
                        type: "error",
                        message: retMsg,
                    });
                }
            })
        },
        // 查询操作员所属分组信息
        qryGroupInfo(){
          let url= '/lbs/usercenter/memberMag/h5QryGroupInfo';
          this.$http.post(url).then(res =>{
            let {retCode,retMsg,data} = res.data;
            if (retCode === '0'){
                this.groupInfo = data.groupInfoList;
            }
          })
          .catch(response => {
            this.$message({
                type: "error",
                message: response,
            });
          })
        },
        //搜索条件重置
        resetForm() {
            this.$refs.form.resetFields();
        },
        //成员名称修改
        changeClick(row) {
            if(this.editId != ''){
                this.$message({
                    message: '请先保存',
                    type: 'warning'
                });
                return
            }
            this.editData = row.personName    //把当前行数据存一份，取消的时候行数据还原
            this.editId = row.personId;
        },
        //取消编辑
        cancelClick(row) {
            this.editId = '';
            row.personName = this.editData;
        },
        //保存修改
        saveClick(row) {
            let url = '/lbs/usercenter/memberMag/h5EditMemberName';
            let params = {
                memberId: row.personId,
                memberName: row.personName
            }
            this.$http.post(url, params).then(res => {
                let {retCode,retMsg,data} = res.data;
                if (retCode == '0') {//成功的情况
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    })
                } else {
                    row.personName = this.editData;
                    this.$alert(retMsg || '请求失败');
                }
                this.editId = '';
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err,
                });
            })
        },
        /*changeColor(state){
          if (state == 1){
            return 'active';
          }
        }*/
      },
        created() {
            this.qryGroupInfo();
        },
        mounted() {
            this.limit = parseInt((document.getElementsByClassName('table')[0].clientHeight-68)/48);
            this.qryData();
        }
    }
</script>

<style scoped>
  .main-pm{
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    background: #FFF;
    border-radius: 0 16px 16px 0;
    display: flex;
    flex-direction: column;
  }
  .table {
    flex: 1;
    /*border-bottom: 1px solid #EEEEEE;*/
  }
  .cokumnActive{
    color: red;
  }
</style>

<style lang="less">
.main-pm {
  .main-top {
    background: #FBFBFB;
    border-bottom: 1px solid #EEEEEE;
    /*display: flex;*/
  }

  .main-top .el-form-item__label {
    font-size: 12px;
    padding: 0 4px 0 0px;
    text-align: unset;
    margin: 0 0 0 5px;
  }

  .main-top .el-input {
    font-size: 12px;
  }

  .main-top .el-input__inner {
    height: 32px !important;
    width: 138px;
  }

  .main-top main-state {
    /*height: 26px!important;*/
    width: 75px;
    padding: 0 6px;
  }

  /*  .mian-top el-input__inner{
    height: 26px;
    width: 103px;
  }*/

  .main-top .el-form-item {
    /*background: #1BCDA5;*/
    font-size: 12px;
    display: inline-flex;
    margin: 6px 2px 16px 12px;
    height: 30px;
  }

  .el-select-dropdown__item {
    height: 31px;
    line-height: 31px;
    font-size: 13px;
  }

  .main-top .el-button {
    font-size: 13px;
  }

  .main-top .el-button + .el-button {
    margin-left: 3px;
  }

  .main-top .el-form {
    display: flex;
  }

  .el-scrollbar {
    max-height: 200px;
    overflow: scroll;
  }

  .el-table {
    margin: 15px 20px;
    width: auto;
    border-bottom: #EEE;
    /*width: inherit;*/
  }

  .el-table .cell {
    text-align: center;
  }

  .main-bottom {
    border-top: 1px solid #EEEEEE;

  }

  .main-bottom .el-pagination {
    margin: 10px 0 10px 0;
    text-align: center;
  }

  .main .cell .el-button--small {
    padding: 0;
  }

  .main .cell .el-input__inner {
    height: 28px;
  }

  /*.el-select__tags {
    flex-wrap: nowrap;
    overflow: hidden; // 滚动条
  }*/

  /*.fin-select__tags-text {
    display: inline-block;
    //根据自己的需要调整文字宽度
    max-width: 15px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }*/

  //根据自己需要调整叉号的位置
  /*.fin-select .fin-tag__close.fin-icon-close {
    top: -5px;
    right: -4px;
  }*/
}
</style>
